<template>
	<view class="onlineWarrantyContainer">
		<view class="warrantyItem flex">
			<view class="warrantyLabel">报修类型</view>
			<view class="warrantyInputBox flex">
				<block v-if="!isDiasbled">
					<picker mode="selector" :range="warrantyData" @change="changeWarranty" style="width: 100%;position: relative;">
						<view class="inputBox">{{warrantyData[warrantyIdx]}}</view>
						<image src="../../static/images/moreIcon3.png" @click="changeWarranty" class="moreIcon3"></image>
					</picker>
				</block>
				<input type="text" v-else disabled="true" v-model="repairInfo.typeName" placeholder="请选择报修类型" class="warrantyInput"/>
			</view>
		</view>
		<view class="warrantyItem flex">
			<view class="warrantyLabel">报修地点</view>
			<view class="warrantyInputBox flex">
				<input type="text" :disabled="isDiasbled" v-model="repairPlace" placeholder="请输入报修地点" class="warrantyInput"/>
			</view>
		</view>
		<view class="warrantyItem flex">
			<view class="warrantyLabel">教室信息</view>
			<view class="warrantyInputBox flex">
				<block v-if="!isDiasbled">
					<picker mode="selector" :range="classroomData" @change="changeClassroom" style="width: 100%;position: relative;">
						<view class="inputBox">{{classroomData[classroomIdx]}}</view>
						<image src="../../static/images/moreIcon3.png" @click="changeClassroom" class="moreIcon3"></image>
					</picker>
				</block>
				<input v-else type="text" :disabled="isDiasbled" v-model="repairInfo.laboratoryName" placeholder="非必填项" class="warrantyInput"/>
			</view>
		</view>
		<view class="warrantyItem">
			<view class="warrantyLabel">报修内容</view>
			<textarea :disabled="isDiasbled" placeholder="内容描述……" v-model="repairContent" class="warrantyTextArea"/>
		</view>
		<view class="cameraUploadBox flex">
			<image src="../../static/images/camera.png" class="cameraImg" style="margin-right: 20rpx;" @click="uploadImg()"></image>
			<block v-if="choosePicList.length > 0">
				<view class="cameraItem" v-for="item,index in choosePicList" :key="index">
					<image :src="item" class="cameraImg"></image>
					<image src="../../static/images/closeIcon.png" class="closeIcon" @click="delImg(index)"></image>
				</view>
			</block>
		</view>
		<button type="primary" class="submitBtn" @click="submitWarranty()" v-if="!isDiasbled">提交申请</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				repairPlace: '',
				choosePicList:[],
				warrantyList:[],
				warrantyData:['请选择报修类型'],
				warrantyIdx: 0,
				classroomList: [],
				classroomData:['请选择教室'],//页面渲染用
				classroomIdx: 0,
				repairContent: '',//	报修说明
				repairId: '',
				isDiasbled: false,
				repairInfo: {}
			}
		},
		onLoad(options) {
			let _this = this;
			/* uni.getStorage({
			    key: 'userPhone',
			    success: function (res) {
			       _this.userPhone = res.data;
			    }
			}); */
			this.searchWarrantyType();
			this.searchClassroomList();
			console.log(options,options.repairId);
			if(options.repairId && options.repairId != undefined) {
				this.repairId = options.repairId;
				this.isDiasbled = true;
				this.searchRepairInfo();
			}
		},
		methods: {
			//查询保修类型
			searchWarrantyType() {
				let _this = this;
				_this.$utils.requestFun('/member/repairType/api/selectRepairTypeList?route=member', {
					token: getApp().globalData.token
				}, 'GET').then(res => {
					console.log(res)
					_this.warrantyList = res.data.data ? res.data.data : [];
					if(res.data.data && res.data.data.length > 0) {
						for(let i = 0;i<res.data.data.length;i++) {
							_this.warrantyData.push(res.data.data[i].typeName);
						}
					}
				});
			},
			changeWarranty(e) {
				this.warrantyIdx = e.target.value;
			},
			//查询教室列表
			searchClassroomList() {
				let _this = this;
				_this.$utils.requestFun('/stadium/stadium/api/queryLabortoryListApi?routh=curriculum', {
					channelId: getApp().globalData.channelId,
					page: 1,
					limit: 999,
					roomState: 1 //	教室是否启用：0：否1：是
				}, 'GET').then(res => {
					_this.classroomList = res.data.data.data ? res.data.data.data : [];
					if(res.data.data.data && res.data.data.data.length > 0) {
						for(let i = 0;i<res.data.data.data.length;i++) {
							let classInfo = res.data.data.data[i].laboratoryNum + ' ' + res.data.data.data[i].laboratoryName;
							_this.classroomData.push(classInfo);
						}
					}
				});
			},
			//选择教室
			changeClassroom(e) {
				this.classroomIdx = e.target.value;
			},
			//上传图片
			uploadImg() {
				if(this.isDiasbled) {
					return;
				}
				let _this = this;
				
				wx.chooseImage({
					count: 1,
					success:(res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: getApp().globalData.serverUrl+'/file/file/api/uploadImg', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								token: getApp().globalData.token,
								// file: tempFilePaths[0],
								relative: 'repair',
								appCode: 'repair'
							},
							success: (uploadFileRes) => {
								let imgData = JSON.parse(uploadFileRes.data);
								_this.choosePicList.push(imgData.filePreviewPathFull)
							}
						});
					}
				})
				
				
				
				
			},
			
			//删除图片
			delImg(idx) {
				if(this.isDiasbled) {
					return;
				}
				this.choosePicList.splice(idx,1);
			},
			submitWarranty() {
				if(this.isDiasbled) {
					return;
				}
				let classroomIdx = this.classroomIdx;
				let warrantyIdx = this.warrantyIdx;
				if(warrantyIdx === 0) {
					uni.showToast({
						title: '请选择报修类型！',
						icon: 'none'
					})
					return;
				}else if(this.repairPlace == '') {
					uni.showToast({
						title: '请输入报修地点！',
						icon: 'none'
					})
					return;
				}else if(this.repairContent == '') {
					uni.showToast({
						title: '请输入报修内容！',
						icon: 'none'
					})
					return;
				}
				let _this = this;
				_this.$utils.requestFun('/member/userRepair/api/addRepairFront?route=member', {
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					repairType: _this.warrantyList[warrantyIdx-1].typeId, //	报修类型
					repairPlace: _this.repairPlace,//报修地点
					repairContent: _this.repairContent,//	报修说明
					// videoUrl: videoUrl,//	语音
					photo: _this.choosePicList.join(','),//	图片，可以多个 用英文半角逗号分隔
					laboratoryId: _this.classroomList[classroomIdx-1].laboratoryId,//	选择的教室id，可以为空
				}, 'GET').then(res => {
					console.log(res)
					uni.showToast({title: '在线报修成功！', icon: 'none',success() {
						setTimeout(()=> {
							// uni.navigateBack({
							//     delta: 1
							// });
							uni.navigateTo({
							    url: '/pages/mine/mine'
							});
						},1000)
					}});
				});
			},
			searchRepairInfo() {
				let _this = this;
				_this.$utils.requestFun('/member/userRepair/api/queryUserRepairInfo?route=member', {
					token: getApp().globalData.token,
					repairId: _this.repairId
				}, 'GET').then(res => {
					console.log(res);
					_this.repairInfo = res.data.data;
					_this.repairPlace = res.data.data.repairPlace;
					_this.repairContent = res.data.data.repairContent;
					if(res.data.data.repairAnnexList && res.data.data.repairAnnexList.length > 0) {
						for(let i = 0;i<res.data.data.repairAnnexList.length;i++) {
							_this.choosePicList.push(res.data.data.repairAnnexList[i].photo);
						}
					}
				});
			}
		}
	}
</script>

<style>
	.onlineWarrantyContainer {
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.flex {
		display: flex;
	}
	.warrantyItem {
		width: 94%;
		margin: 30rpx 24rpx;
	}
	.warrantyLabel {
		font-size: 32rpx;
		color: #222222;
		line-height: 80rpx;
		margin-right: 26rpx;
		width: 20%;
		text-align: center;
	}
	.warrantyInputBox {
		width: 75%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #F6F6F6;
		border-radius: 16rpx;
		border: 1px solid #EEEEEE;
	}
	.pickerBox {
		width: 83%;
		padding-left: 28rpx;
		font-size: 32rpx;
	}
	.warrantyInput {
		width: 100%;
		padding: 0 28rpx;
		margin-top: 25rpx;
		font-size: 26rpx;
	}
	.inputBox {
		padding-left: 24rpx;
		font-size: 26rpx;
	}
	.moreIcon3 {
		width: 36rpx;
		height: 8rpx;
		position: absolute;
		right: 16px;    
		margin-top: -44rpx;
	}
	.warrantyTextArea {
		width: 94%;
		height: 160rpx;
		padding: 21rpx 18rpx;
		background-color: #F6F6F6;
		border-radius: 16rpx;
		border: 1px solid #EEEEEE;
		margin-bottom: 20rpx;
	}
	.cameraUploadBox {
		width: 94%;
		margin: 30rpx 24rpx;
	}
	.cameraItem {
		position: relative;
		margin-right: 20rpx;
		width: 170rpx;
		height: 170rpx;
	}
	.cameraImg {
		width: 170rpx;
		height: 170rpx;
		position: relative;
	}
	.closeIcon {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: 6rpx;
		top: 6rpx;
	}
	.submitBtn {
		width: 90%;
		height: 77rpx;
		line-height: 77rpx;
		text-align: center;	
		font-size: 27rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 35rpx;
		position: fixed;
		bottom: 20rpx;
		left: 5%;
	}
</style>
